<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<script src="../../../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../../polymer.html">
<script src="../../../tools/test/htmltest.js"></script>
<script src="../../../tools/test/chai/chai.js"></script>

<template id="template">
  <div id="list">
    <template id="t" repeat>
      <div>{{label}}</div>
    </template>
  </div>
</template>

<div id="foo"></div>

<script>
  document.addEventListener('HTMLImportsLoaded', function() {
    var template = document.querySelector('#template');

    var host = document.querySelector('#foo');
    var root = host.createShadowRoot();
    root.appendChild(template.content);

    var m = [
      {label: 'item1'},
      {label: 'item2'}
    ];

    host.shadowRoot.querySelector('#t').model = m;

    // TODO(sjmiles): forcing SD to render at this point is not necessary, 
    // except to understand why it causes a failure at the assertion
    host.offsetHeight;
    var list = host.shadowRoot.querySelector('#list');

    new MutationObserver(function() {
      chai.assert.equal(list.children.length, 3, 'list.children.length (should be 3 but returns 1)');  
      done();
    }).observe(list, {childList: true});
  });
</script>
